<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="font/font_d9s7csr2qh/iconfont.css">
    <link rel="stylesheet" href="font/font_ic2aueah3c/iconfont.css">
    <link rel="stylesheet" href="css/detail.css">

    <title>详情页</title>
</head>

<body>
    <div class="wraptop">
        <div>
            <ul>
                <li><a class="lw">中关村在线</a></li>
                <li><a>ZOL企业购</a></li>
                <li><a>解决方案馆</a></li>
                <li><a>中在指数</a></li>
                <li><a class="lm">供应商入驻</a></li>
            </ul>
            <ul id="lore">
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html" class="lm">注册</a></li>
            </ul>

        </div>
    </div>
    <div class="top">
        <div><img src="img/logo.png" alt=""></div>
        <div class="search">
            <div class="sea1"><i class="iconfont icon-sousuo"></i><input type="text" placeholder="找找你想要的商品"><span>搜 索</span>
            </div>
            <ul class="jig">
                <li>
                    <a href="">激光打印机</a>
                </li>
                <li>
                    <a href="">商用显示</a>
                </li>
                <li>
                    <a href="">投影机</a>
                </li>
                <li>
                    <a href="">复印机</a>
                </li>
                <li>
                    <a href="">硒鼓</a>
                </li>
                <li>
                    <a href="" class="la">墨盒</a>
                </li>
            </ul>
        </div>
        <div class="che">
            <p class="cheshu">0</p>
            <i class="iconfont icon-gouwuche"><a href=""></a></i>
            <span>我的购物车</span>
        </div>
        <div class="t-t"><img src="img/top.png" alt=""></div>
    </div>
    <div class="navwrap">
        <div class="nav">
            <div>
                <span>
                    全部商品分类
            </span>
            </div>
            <ul>
                <li>
                    <a href="">解决方案馆</a>
                </li>
                <li>
                    <a href="">政府采购</a>
                </li>
                <li>
                    <a href="">企业采购</a>
                </li>
                <li>
                    <a href="">福利采购</a>
                </li>
                <li class="last-li">
                    <a href="">中在指数</a><span class="down"></span>
                    <ul class="ej">
                        <li>
                            <a href="">价格指数</a></li>
                        <li>
                            <a href="">销量指数</a>
                            <li>
                                <a href="">交易指数</a></li>
                            <li>
                                <a href="">品牌指数</a></li>
                    </ul>
                    </li>
            </ul>
        </div>
    </div>
    <div class="dmid">
        <div class="fanhui"><a href="index.html">首页&nbsp;&nbsp;&gt;&nbsp;&nbsp;</a>
            <p class="name1"></p>
        </div>
    </div>
    <div class="dcon">
        <div id="boxx">
            <div class="dleft" id="zoomBox">
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper" id="midArea">
                        <div class="swiper-slide dbimg" style="background-image:url()"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl07.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl08.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl06.jpg)"></div>
                        <div id="zoom"></div>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
                <div id="bigArea">
                    <img src="">
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper" id="smallArea">
                        <div class="swiper-slide dsimg" style="background-image:url()"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl07.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl08.jpg)"></div>
                        <div class="swiper-slide" style="background-image:url(img/cl06.jpg)"></div>

                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="dname">
                <p></p>
            </div>
            <div class="dprice"><span>价&nbsp;&nbsp;&nbsp;&nbsp;格&nbsp;&nbsp;</span><span>&nbsp;&nbsp;￥</span>
                <p></p>
            </div>
            <div class="count">
                <span>数&nbsp;&nbsp;&nbsp;量</span>
                <p class="jian">-</p>
                <input type="text" class="num">
                <p class="jia">+</p>
            </div>
            <p class="dcw"><input type="button" id="btn" value="加入购物车"></p>
        </div>

    </div>
    <div class="footer">
        <div>
            <div><img src="img/下载.png" alt=""><span>热线电话</span><span>400-688-1999</span></div>
            <p>©2021 北京知行锐景科技有限公司 / 北京中在云商科技有限公司 版权备案单位/子公司</p>
            <p>京ICP证150096号 &nbsp;&nbsp;&nbsp;京ICP备14061128号&nbsp;&nbsp;&nbsp; 京公网安备11010802020026号&nbsp;&nbsp;&nbsp; 网络文化经营许可证京网文[2016]1631-199 &nbsp;&nbsp;&nbsp;增值电信业务经营许可证：京B2-20200543</p>

        </div>
        <div class="erwei"><img src="img/code.53fecea8.png" alt=""></div>
    </div>
    <script>
        var cheshu = document.querySelector(".cheshu");
        var id = JSON.parse(localStorage.getItem("id"));
        console.log(id)
        if (id != 0) {
            $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                id: id
            }).then(res => {
                console.log(res)
                let num = 0;
                for (let i = 0; i < res.data.length; i++) {
                    num += parseInt(res.data[i].pnum);
                }
                cheshu.innerHTML = num;

                // location.reload();
            })
        } else {
            cheshu.innerHTML = 0;
        }


        let url = location.search.split("&");
        // console.log(url)
        var pid = url[0].split("=")[1];
        // var username = url[1].split("=")[1];
        var user = JSON.parse(localStorage.getItem("ursername"));
        console.log(user)
        if (user == undefined) {
            let str = '<li><a href="login.html">登录</a></li><li><a href="register.html" class="lm">注册</a></li>'
            $("#lore").html(str);
        } else(
            $("#lore").html("<li>欢迎您,&nbsp;&nbsp;" + user + "&nbsp;<button>[退出]</button></li>")
        )
        $("#lore button").click(function() {
            location.href = "index.html";
        })
        $.get("http://jx.xuzhixiang.top/ap/api/detail.php?", {
            id: pid
        }).then(res => {
            console.log(res);
            $(".name1").html(res.data.pname)
            $(".dname p").html(res.data.pname)
            $(".dprice p").html(res.data.pprice)
            $(".dbimg").attr(
                "style", "background-image:url(" + res.data.pimg + ")"
            )
            $(".dsimg").attr(
                "style",
                "background-image:url(" + res.data.pimg + ")"
            )
            $("#bigArea img").attr({
                    src: res.data.pimg
                })
                // var uid = res.data.uid;
            var uid = JSON.parse(localStorage.getItem("id"))
            console.log(uid);
            $(function() {
                $(".fanhui").click(function() {
                    window.history.go(-1);
                });

                $("#btn").click(function() {
                    if (user == undefined) {
                        alert("请您先登录");
                    } else {
                        $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                            uid: uid,
                            pid: pid,
                            pnum: $(".num").val()
                        }).then(res => {
                            console.log(res);

                            location.href = "cart.html?pid=" + pid + "";



                        });

                        $.get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
                            id: uid,
                            pid: pid,
                            pnum: $(".num").val()
                        }).then(res => {
                            console.log(res)
                        })


                        $.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
                            id: uid
                        }).then(res => {
                            console.log(res)
                        })
                    }


                });

            })
        })
        $(".last-li").mouseenter(function() {
            $(".last-li>span").attr("class", "up")
            $(".ej").fadeToggle();
        })
        $(".last-li").mouseleave(function() {
            $(".last-li>span").attr("class", "down")
            $(".ej").fadeToggle();
        });

        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            thumbs: {
                swiper: galleryThumbs
            }
        });
        $(".num").val(1);
        var jian = document.querySelector(".jian");
        var jia = document.querySelector(".jia")
        var num = document.querySelector(".num")
        jian.onclick = function() {
            if (num.value <= 1) { //临界值限制，不能小于1
                num.value = 1;
            } else {
                num.value--;
            }
        }

        jia.onclick = function() {
            if (num.value >= 1) {
                num.value++;
            }
        };

        function Zoom() {
            this.zoomBox = document.getElementById("zoomBox");
            this.midArea = document.getElementById("midArea");
            this.midImg = this.midArea.children[0];
            this.zoom = document.getElementById("zoom");
            this.bigArea = document.getElementById("bigArea");
            this.bigImg = this.bigArea.children[0];

            this.smallArea = document.getElementById("smallArea");
            this.smallImg = this.smallArea.children;

            this.midArea.onmouseover = () => {
                this.zoom.style.display = "block";
                this.bigArea.style.display = "block";
            }
            this.midArea.onmouseout = () => {
                this.zoom.style.display = "none";
                this.bigArea.style.display = "none";
            }
            this.midArea.onmousemove = (e) => {
                let evt = e || event;
                let mw = this.midArea.offsetWidth - this.zoom.offsetWidth;
                let mh = this.midArea.offsetHeight - this.zoom.offsetHeight;
                //let l = evt.offsetX - this.zoom.offsetWidth / 2;
                //let t = evt.offsetY - this.zoom.offsetHeight / 2;
                let l = evt.pageX - this.zoom.offsetWidth / 2 - 150;
                let t = evt.pageY - this.zoom.offsetHeight / 2 - 230;
                // let t = evt.pageY - this.midArea.offsetTop - this.zoom.offsetHeight / 2;
                // let l = evt.pageX - this.midArea.offsetLeft - this.zoom.offsetWidth / 2;

                l = l <= 0 ? 0 : l >= mw ? mw : l;
                t = t <= 0 ? 0 : t >= mh ? mh : t;


                this.zoom.style.left = l + "px";
                this.zoom.style.top = t + "px";


                this.bigImg.style.left = -this.zoom.offsetLeft / this.midArea.offsetWidth * this.bigImg
                    .offsetWidth + "px";
                this.bigImg.style.top = -this.zoom.offsetTop / this.midArea.offsetHeight * this.bigImg
                    .offsetHeight + "px";

            }
        }
        new Zoom();

        // window.onload = function() {
        //         var oMidArea = document.querySelector(".bigbox");
        //         var oZoom = document.getElementById("zoom");
        //         var oBigArea = document.getElementById("bigArea");
        //         // var oZoomBox = document.getElementById("zoomBox");
        //         var oBigImg = oBigArea.children[0];
        //         var oMidImg = document.querySelector(".timg");

        //         oMidArea.onmouseover = function() {
        //             oZoom.style.display = "block";
        //             oBigArea.style.display = "block";
        //         }
        //         oMidArea.onmouseout = function() {
        //             oZoom.style.display = "none";
        //             oBigArea.style.display = "none";
        //         }


        //         oMidArea.onmousemove = function(e) {

        //             //控制放大镜的移动
        //             var evt = e;
        // var x = evt.pageX - oMidArea.offsetLeft - oZoom.offsetWidth / 2;
        // var y = evt.pageY - oMidArea.offsetTop - oZoom.offsetHeight / 2;

        //             if (x <= 0) {
        //                 x = 0;
        //             }
        //             if (x >= oMidArea.offsetWidth - oZoom.offsetWidth) {
        //                 x = oMidArea.offsetWidth - oZoom.offsetWidth;
        //             }
        //             if (y <= 0) {
        //                 y = 0;
        //             }
        //             if (y >= oMidArea.offsetHeight - oZoom.offsetHeight) {
        //                 y = oMidArea.offsetHeight - oZoom.offsetHeight;
        //             }

        //             oZoom.style.left = x + "px";
        //             oZoom.style.top = y + "px";

        //             //控制大图的移动
        //             oBigImg.style.left = -oZoom.offsetLeft / oMidArea.offsetWidth * oBigImg.offsetWidth + "px";
        //             oBigImg.style.top = -oZoom.offsetTop / oMidArea.offsetHeight * oBigImg.offsetHeight + "px";

        //         }
        //     }
    </script>


</body>

</html>